<template>
    <div class="power-card" ref="echartsPoly"></div>
</template>

<script>
export default {
    name: 'power-card',
    props: {
        chartsData: {
            type: Array,
            required: true
        },
    },
    data() {
        return {
            frist: true,
            title: '',
            myChart: null,
        }
    },
    watch: {
        chartsData: {
            handler(newData) {
                this.initEchart(newData)
            }
        },
    },
    methods: {
        initEchart(newData) {
            newData[0][2] = '位移变化量'
            const seriesGroup = []
            let ArrSeries = []
            let mathArr = []
            for (let i = 1; i < newData.length; i++) {
                mathArr.push(newData[i][2] - newData[i - 1][2]);
            }
            newData.slice(1).forEach((item1, index1) => {
                mathArr.forEach((item2, index2) => {
                    if (index1 === index2) {
                        item1[2] = String(item2)
                    }
                })
            })
            newData[1][2] = '0'
            if (newData[0].length !== 0) {
                ArrSeries = [...newData[0]]
                ArrSeries.shift();
                ArrSeries.pop();
                this.title = ArrSeries[0].match(/.{2}$/)[0]
                ArrSeries.forEach((item) => {
                    // console.log(item);
                    if (item === "位移变化量") {
                        seriesGroup.push({
                            encode: {
                                x: 'createTime',
                                y: item
                            },
                            name: item,
                            type: 'bar',
                            markLine: {
                                symbol: ['none', 'none'],
                                label: {
                                    distance:8
                                },
                                data: [    
                                {
                                    name: 'Y轴值为0的水平线',
                                    yAxis: 0,
                                    
                                },
                            ],
                            lineStyle:{
                                type:'solid'
                            }
                            },
                            yAxisIndex: 1,
                            symbol: 'circle' // 节点样式
                        })
                    } else {
                        seriesGroup.push({
                            encode: {
                                x: 'createTime',
                                y: item
                            },
                            name: item,
                            type: 'line',
                            yAxisIndex: 0,
                            symbol: 'circle' // 节点样式
                        })
                    }
                })
            }
            try {
                this.myChart.dispose()
            } catch (e) {
                // console.log(e)
            }
            this.myChart = this.$echarts.init(this.$refs.echartsPoly)
            const option = {
                color: ['#00BBF7', '#06FDBC', '#FD8601',],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    padding: 3,
                    textStyle: {
                        fontSize: 10,
                        lineHeight: 15
                    }
                },
                legend: {
                    data: ArrSeries,
                    icon: 'rect',
                    right: 20,
                    itemWidth: 8,
                    itemHeight: 8
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 'auto',
                        formatter: function (value) {
                            return value.slice(11, 16)
                        },
                        textStyle: {
                            fontSize: 8
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value'
                    },
                    {
                        type: 'value'
                    },
                ],
                series: seriesGroup,
                dataset: {
                    source: newData
                }
            }
            option && this.myChart.setOption(option)
        }
    }
}
</script>

<style  scoped>
.power-card {
    width: 100%;
    height: 250px;
}

.card {
    background-color: #ffffff;
}

.head {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 3px 10px;
    margin-top: 14px;

    &-status {
        font-size: 13px;
        margin-left: 150px;
        padding: 7px;
        border-radius: 15px;
        background-color: #f2f2f2;
    }

    &-left {
        width: 5px;
        height: 30px;
        background-color: #01bb70;
    }
}
</style>
